<template>
  <!-- <div :style="rootStyle" class="drop-box"> -->
    <ul :style="rootStyle" :class='{"drop-box": true, "drop-box-active": show,}'>
      <li v-for="(item, index) in list" class="drop-item" :style="itemStyle"
      @mouseenter="enter" @mouseleave="leave" v-if="Array.isArray(list)"
      @click.stop="entryClick(index)">
        <slot :name="'entry-'+index">
          {{item}}
        </slot>
      </li>
      <li v-for="(item, key, index) in list" class="drop-item" :style="itemStyle"
      @mouseenter="enter" @mouseleave="leave" v-if="!Array.isArray(list)"
      @click.stop="entryClick(key)">
        <slot :name="'entry-'+index">
          {{item}}
        </slot>
      </li>
    </ul>
  <!-- </div> -->
</template>

<script>
export default {

  props: {
    width: {default: "", },
    align: {default: "center", },
    list: {},
    show: {default: true,},
    hover: {dafault: false,},
  },
  data() {
    return {

    }
  },
  computed: {
    rootStyle: {
      get() {
        this.width
        if(this.width) {
          return {
            width: this.width
          }
        } else {
          return {}
        }
      },
      set(newValue) {

      },
    },
    itemStyle() {
      this.align
      return {
        "text-align": this.align,
      }
    }
  },
  methods: {
    enter(e) {
      if(this.hover) {
        e.target.style.color = "#A187F3";
      }
    },
    leave(e) {
      if(this.hover) {
        e.target.style.color = "#606266"
      }
    },
    entryClick(index) {
      console.log("ok")
      this.$emit("entryClick", index)
    },
    debug() {
      // setTimeout(()=> {
      //   console.log(this.show)
      // }, 1000)
      // console.log(this.show)
    },
  },
  created() {
    console.log(this.list)
  }
}
</script>

<style lang="scss" scoped>
.drop-box {
  background: $f;
  box-shadow: 0px 10px 24px 6px rgba(34,40,49,0.04);
  border-radius: 10px;
  padding: 0 10px;
  width: 100%;
  font-size: 16px;
  color: $bg;
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 50%;
  // translate scale rotate skew
  transform: translate3d(-50%, 0, 10px) scaleY(0);
  transform-origin: top left;
  opacity: 0;
  overflow: hidden;
  transition: all .2s ease-out;
  color: $primary;
}
.drop-box-active {
  opacity: 1;
  transform: translate3d(-50%, 0, 10px) scaleY(1);
}
.drop-item {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 1.5;
  color: #606266;
}
.drop-item + .drop-item {
  border-top: 1px solid rgba(234,234,234,1);
}
</style>
